<template>
  <div>
      <div class="title">热销推荐</div>
      <ul>
          <router-link
          tag="li"
          :to="'/detail/'+item.id"
          class="item border-bottom"
          v-for="item of list"
          :key="item.id">
              <img class="item-img" :src="item.imgUrl"/>
              <div class="item-info">
                  <p class="item-title">{{item.title}}</p>
                  <p class="item-desc">{{item.desc}}</p>
                  <button class="item-button">查看详情</button>
              </div>
          </router-link>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  },
  data () {
    return {
      // recommendList: [{
      //   id: '0001',
      //   imgUrl: 'http://img1.qunarzz.com/sight/p0/1412/9f/fbff2a5302c0ce906ef9b64159730f89.water.jpg_200x200_87806940.jpg',
      //   title: '上海海洋水族馆',
      //   desc: '上海市浦东新区陆家嘴环路1388号（近东方明珠）'
      // }, {
      //   id: '0002',
      //   imgUrl: 'http://img1.qunarzz.com/sight/p0/1811/e4/e4b9b471d2afc473a3.img.jpg_200x200_9a7794fc.jpg',
      //   title: '上海欢乐谷',
      //   desc: '上海市松江区佘山镇林湖路888号'
      // }, {
      //   id: '0003',
      //   imgUrl: 'http://img1.qunarzz.com/sight/p0/1507/2e/2e23d202457702c1.img.jpg_200x200_ff41b378.jpg',
      //   title: '上海自然博物馆',
      //   desc: '上海市静安区石门二路128号静安雕塑公园内'
      // }]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.title
  line-height:.8rem
  background:#eee
  text-indent:0.2rem
.item
  overflow:hidden
  display:flex
  height:1.9rem
  .item-img
    width:1.7rem
    height:1.7rem
    padding:0.1rem
  .item-info
    color: #212121;
    flex:1
    padding:0.1rem
    min-width:0
    .item-title
      line-height:0.54rem
      font-size:.32rem
      ellipsis()
    .item-desc
      line-height:0.4rem
      color:#716c6c
      ellipsis()
    .item-button
      line-height:.44rem
      margin-top:0.16rem
      background:#ff9300
      padding:0 .2rem
      border-radius:0.06rem
      color:#fff
</style>
